$(function(){
    var isFullScreen = false;
    window.onresize = function(){
        soil_pie.resize();
        waterline_line.resize();
        water_bar.resize();
        water_pie.resize();
        if(!isFullScreen){
            $(".screen").css("backgroundImage","url('image/fullScreen.png')");
        }else{
            $(".screen").css("backgroundImage","url('image/outFullScreen.png')");
        }
        
    }
    var soil_pie = echarts.init(document.getElementById("right_part1"),"light");
    var water_pie = echarts.init(document.getElementById("right_part2"),"light");
    var waterline_line = echarts.init(document.getElementById("left_part1"),"light");
    var water_bar = echarts.init(document.getElementById("left_part2"),"light");


    var water_bar_json = [{point:'恒青湖水位监测1',data:210},{point:'恒青湖水位监测2',data:160},{point:'文管楼排污井水位报警监测',data:149},
        {point:'恒青湖水位监测1',data:106},{point:'10.体育馆监测点',data:60},{point:'外语楼排污井水位报警监测',data:130},{point:'图书馆排污井水位报警监测',data:130}]
    var water_bar_data = [];
    var museum_data_in = [
        {value:80, name:'浑浊物'},
        {value:250, name:'需氧量'},
        {value:100, name:'矿物质'}
    ]
    var museum_data_out = [
        {value:80, name:'浑浊物'},
        {value:250, name:'需氧量'},
        {value:33, name:'N'},
        {value:34, name:'P'},
        {value:33, name:'K'}
    ]
    var lake_data_in = [
        {value:180, name:'浑浊物'},
        {value:350, name:'需氧量'},
        {value:205, name:'矿物质'}
    ]
    var lake_data_out = [
        {value:180, name:'浑浊物'},
        {value:350, name:'需氧量'},
        {value:65, name:'N'},
        {value:81, name:'P'},
        {value:59, name:'K'}
    ]
    var laji_data_in = [
        {value:280, name:'浑浊物'},
        {value:350, name:'需氧量'},
        {value:250, name:'矿物质'}
    ]
    var laji_data_out = [
        {value:280, name:'浑浊物'},
        {value:350, name:'需氧量'},
        {value:70, name:'N'},
        {value:150, name:'P'},
        {value:30, name:'K'}
    ]
    var title = ["恒青湖水质检测","文管楼水质检测","外语楼水质检测"]
    var pie_data_in = [museum_data_in,lake_data_in,laji_data_in]
    var pie_data_out = [museum_data_out,lake_data_out,laji_data_out]
    var showNum=0;
    var str = ""
    for (let i = 0; i < water_bar_json.length; i++) {
        water_bar_data.push(water_bar_json[i].data)
        if (water_bar_json[i].data>199) {
            str += water_bar_json[i].point+"异常 ";
        }
    }
    
    $("#water_bar_tip").html(str)

    draw_water_pie(title[showNum],pie_data_in[showNum],pie_data_out[showNum])
    /**
    * 
    * 土壤饼状图
    * 
    */
    soil_pie.setOption({
        tooltip: {
            trigger: 'item',
            formatter: "{b}:{c} ({d}%)"
        },
        series: [
            {
                type:'pie',
                selectedMode: 'single',
                radius: [0, '25%'],
                center: ['47%','40%'],
                label: {
                    normal: {
                        position: 'inner'
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[
                    {value:100, name:'水分'},
                    {value:200, name:'有机质'},
                    {value:300, name:'矿物质'}
                ]
            },
            {
                type:'pie',
                radius: ['35%', '50%'],
                center: ['47%','40%'],
                label: {
                    normal: {
                        formatter: ' {b|{b} } {per|{d}%} ',
                        backgroundColor: 'rgba(26,107,230, 0.5)',
                        borderColor: '#aaa',
                        borderWidth: 1,
                        borderRadius: 4,
                        rich: {
                            b: {
                                color:"#fff",
                                fontSize: 14,
                                lineHeight: 30
                            },
                            per: {
                                color: '#eee',
                                backgroundColor: '#334455',
                                borderRadius: 5
                            }
                        }
                    }
                },
                data:[
                    {value:100, name:'水分'},
                    {value:200, name:'有机质'},
                    {value:100, name:'N'},
                    {value:100, name:'P'},
                    {value:100, name:'K'}
                ]
            }
        ]
    });

    /**
    * 
    * 水体饼状图
    * 
    */
    function draw_water_pie(title,data_in,data_out){
        water_pie.setOption({
            tooltip: {
                trigger: 'item',
                formatter: "{b}:{c} ({d}%)"
            },
            title: {
                text: title,
                x:'left :10px',
                top:200,
                left:15,
                textStyle: {
                    color: "#20D2D3",
                    fontSize:"16",
                    fontWeight:"100"
                }
            },
            series: [
                {
                    type:'pie',
                    selectedMode: 'single',
                    radius: [0, '25%'],
                    center: ['47%','40%'],
                    label: {
                        normal: {
                            position: 'inner'
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:data_in
                },
                {
                    type:'pie',
                    radius: ['35%', '50%'],
                    center: ['47%','40%'],
                    label: {
                        normal: {
                            formatter: ' {b|{b} } {per|{d}%} ',
                            backgroundColor: 'rgba(26,107,230, 0.5)',
                            borderColor: '#aaa',
                            borderWidth: 1,
                            borderRadius: 4,
                            rich: {
                                b: {
                                    color:"#fff",
                                    fontSize: 14,
                                    lineHeight: 30
                                },
                                per: {
                                    color: '#eee',
                                    backgroundColor: '#334455',
                                    borderRadius: 5
                                }
                            }
                        }
                    },
                    data:data_out
                }
            ]
        });
    }
    

    /**
    * 
    * 泄漏预警折线图
    * 
    */
    waterline_line.setOption({
    
        tooltip : {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            textStyle: {
                color: '#fft'
            },
            data:['恒青湖水位监测1','恒青湖水位监测2','恒青湖水位监测3','恒青湖水位监测4',
			'基础楼排污井水位报警监测','图书馆排污井水位报警监测','文管楼排污井水位报警监测','外语楼排污井水位报警监测'
			,'金湖餐厅风力湿度温度报警监测','体育馆风力湿度温度报警监测']
        },
        grid: {
            top:'15%',
            left: '4%',
            right: '5%',
            bottom: '5%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                 // 控制网格线是否显示
                splitLine: {
                    show: false,
                },
                axisLine:{
                    lineStyle:{
                        color:'#ffffff',
                    }
                },
                data : ['06:00','06:30','07:00','07:30','08:00','08:30','09:00']
            }
        ],
        yAxis : [
            {
                axisLine:{
                    lineStyle:{
                        color:'#ffffff',
                    }
                },
                splitLine: {
                    show: false,
                },
                type : 'value'
            }
        ],
        series : [
            {
                name:'警戒水位线',
                type:'line',
                data:[900, 900,900,900,900,900,900,900],
                itemStyle: {
                    normal: {
                      color: "#ff0000",//折线点的颜色
                      lineStyle: {
                      color: "#ff0000"//折线的颜色
                     }
                   }
                },
            },
            {
                name:'恒青湖水位监测1',
                type:'line',
                data:[120, 132, 101, 134, 90, 230, 210]
            },
            {
                name:'恒青湖水位监测2',
                type:'line',
                data:[220, 182, 191, 234, 290, 330, 310]
            },
            {
                name:'恒青湖水位监测3',
                type:'line',
                data:[150, 232, 201, 154, 190, 330, 410]
            },
            {
                name:'恒青湖水位监测4',
                type:'line',
                data:[320, 332, 301, 334, 390, 330, 320]
            },
            {
                name:'基础楼排污井水位报警监测',
                type:'line',
                data:[222,225,260,290,230,390,330]
            },
            {
                name:'图书馆排污井水位报警监测',
                type:'line',
                data:[450, 432, 401, 454, 590, 530, 510]
            },
            {
                name:'文管楼排污井水位报警监测',
                type:'line',
                data:[220, 282, 201, 234, 290, 430, 410]
            },
			 {
                name:'外语楼排污井水位报警监测',
                type:'line',
                data:[220, 282, 201, 234, 290, 430, 410]
            },
			{
                name:'金湖餐厅风力湿度温度报警监测',
                type:'line',
                data:[220, 282, 201, 234, 290, 430, 410]
            },
			{
                name:'体育馆风力湿度温度报警监测',
                type:'line',
                data:[220, 282, 201, 234, 290, 430, 410]
            }
        ]
    })
    var seriesLabel = {
        normal: {
            show: true,
            textBorderColor: '#333',
            textBorderWidth: 2
        }
    }
    

    /**
    * 
    * 水位监测柱状图
    * 
    */
    water_bar.setOption({
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            top:'2%',
            left: '4%',
            right: '8%',
            bottom: '5%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            name: '水位',
            axisLine:{
                lineStyle:{
                    color:'#ffffff',
                }
            },
            splitLine: {
                show: false,
            }
        },
        yAxis: {
            type: 'category',
            axisLine:{
                lineStyle:{
                    color:'#ffffff',
                }
            },
            
            data: ['恒青湖水位监测','基础楼排污井水位报警监测','图书馆排污井水位报警监测','外语楼排污井水位报警监测','金湖餐厅风力湿度温度报警监测'],
            axisLabel: {
                
            }
        },
        series: [
            {
                name: '当前水位值',
                type: 'bar',
                label: seriesLabel,
                data: water_bar_data,
                //颜色  
                itemStyle:{  
                    normal:{  
                        color: function(params){
                            if(params.value >0 && params.value <140){
                                return new echarts.graphic.LinearGradient(0,0,1,0,[{offset:0,color:"#00ccff"},{offset:1,color:"#0033ff"}]);
                              }else if(params.value <=179 ){
                                return new echarts.graphic.LinearGradient(0,0,1,0,[{offset:0,color:"#ffcc00"},{offset:1,color:"#ff9900"}]);
                              }
                              return new echarts.graphic.LinearGradient(0,0,1,0,[{offset:0,color:"#ff3300"},{offset:1,color:"#ff0000"}]);
                            },
                        barBorderRadius: [0, 18, 18 ,0],
                        barWidth:1,
                    },
               },
               barWidth:15,
            },
            /* {
                name: '警戒水位值',
                type: 'bar',
                label: seriesLabel,
                data: [220, 82, 150,220, 82, 150,220],
                //颜色  
                itemStyle:{  
                    normal:{  
                        color: new echarts.graphic.LinearGradient(0,0,1,0,[{offset:0,color:"#ffcc00"},{offset:1,color:"#ff3300"}]),
                      barBorderRadius: [0, 18, 18 ,0]
                      }  
               },  
            } */
        ]
    })
    
    /**
    * 
    * 地图
    * 
    */
    // 百度地图API功能
	var map = new BMap.Map("allmap",{minZoom:17,maxZoom:19,enableMapClick:false});    // 创建Map实例
	map.centerAndZoom(new BMap.Point(114.228926,30.659446), 18);  // 初始化地图,设置中心点坐标和地图级别
	map.setCurrentCity("武汉");          // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(false);     //开启鼠标滚轮缩放
    map.setMapStyleV2({     
         styleJson: [{
            "featureType": "poilabel",
            "elementType": "labels",
            "stylers": {
                "visibility": "on"
            }
        }, {
            "featureType": "poilabel",
            "elementType": "labels.icon",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "poilabel",
            "elementType": "labels.text",
            "stylers": {
                "fontsize": "22"
            }
        }, {
            "featureType": "districtlabel",
            "elementType": "labels.icon",
            "stylers": {
                "visibility": "off"
            }
        }]
    });
    //添加地图类型控件
    map.addControl(new BMap.MapTypeControl({
        mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]
    }));
    let points = [];
    points[0] = new Points(114.227729,30.659205,"恒青湖水位监测点1","当前水位：4.2m<br>预警水位：8m");
    points[1] = new Points(114.227661,30.658424,"恒青湖水位监测点2","当前水位：5.3m<br>预警水位：8m");
    points[2] = new Points(114.227944,30.657838,"恒青湖水位监测点3","博物馆水池质量：正常<br>是否需要换水：否<br>排水口：无流水");
    points[3] = new Points(114.228955,30.657741,"恒青湖水位监测点4","当前水位：2.2m<br>预警水位：5m");
    points[4] = new Points(114.231254,30.658304,"基础楼排污井水位报警监测","当前水位：6.3m<br>预警水位：8m");
    points[5] = new Points(114.228802,30.659038,"图书馆排污井水位报警监测","当前水位：3.3m<br>预警水位：5m");
    points[6] = new Points(114.227261,30.656999,"文管楼排污井水位报警监测","排水口：无流水");
	points[7] = new Points(114.229983,30.657574,"外语楼排污井水位报警监测","排水口：无流水");
	points[8] = new Points(114.22948,30.659851,"金湖餐厅风力湿度温度报警监测","排水口：无流水");
	points[9] = new Points(114.230891,30.65925,"体育馆风力湿度温度报警监测","排水口：无流水");
   /* var polygon = new BMap.Polygon([
        new BMap.Point(114.225546,30.665315), //左上角
		new BMap.Point(114.231726,30.667769), //右下角
		new BMap.Point(114.225689,30.663606), //右下角
		new BMap.Point(114.231942,30.66575), //右下角
		new BMap.Point(114.225582,30.661432), //右下角
		new BMap.Point(114.231798,30.663793), //右下角

    ], {strokeColor:"white", strokeWeight:1, strokeOpacity:1, fillOpacity: 0.9});  //创建多边形
        //添加覆盖物
    map.addOverlay(polygon);  
	*/
    var b = new BMap.Bounds(new BMap.Point(114.225601,30.658593),new BMap.Point(114.231871,30.659742));
        try {	
            BMapLib.AreaRestriction.setBounds(map, b);
        } catch (e) {
            alert(e);
    }
    var opts = {
        width : 220,     // 信息窗口宽度
        height: 100,     // 信息窗口高度
        title : "当前设备信息" , // 信息窗口标题
        enableMessage:true//设置允许信息窗发送短息
    };
    let markerMenus = [];
    for(let i in points){
        color = "#00FF00"
        if(i == 0){
            color = "#FF0000"
        }else if(i == 3){
            color = "#FFA500"
        }
        let icon = new BMap.Symbol(BMap_Symbol_SHAPE_POINT, {
            scale: 1.1,//图标缩放大小
            fillColor: color,//填充颜色
            fillOpacity: 0.8//填充透明度
        })
        markerMenus[i] = {
            callback : function(){
                console.log(points[i]);
                window.location.href = "tables.html";
            }
        }
        addMarker(points[i],icon,i);
    }
    function addMarker(point,icon,i){
        let marker = new BMap.Marker(new BMap.Point(point.long,point.lat),{icon:icon});
        map.addOverlay(marker);
        let markerMenu=new BMap.ContextMenu();
        markerMenu.addItem(new BMap.MenuItem('查看详情',markerMenus[i].callback,100));
        marker.addContextMenu(markerMenu);
        let label = new BMap.Label(point.text,{offset:new BMap.Size(18,-10)});
        marker.setLabel(label);
        let content = point.mouseoverText;
        addClickHandler(content,marker);
    }
    function Points(long,lat,text,mouseoverText) {
        this.long = long;
        this.lat = lat;
        this.text = text;
        this.mouseoverText = mouseoverText;
    }
    function addClickHandler(content,marker){
		marker.addEventListener("click",function(e){
			var p = e.target;
            var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
            var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象 
            map.openInfoWindow(infoWindow,point); //开启信息窗口
        })
    }
    /**
    * 
    * 缩放屏幕开始
    * 
    */
    $(".screen").click(function(){
        fullScreen();
    })
    
    function fullScreen() {
        var el = document.documentElement;
        var rfs = el.requestFullScreen || el.webkitRequestFullScreen || 
            el.mozRequestFullScreen || el.msRequestFullScreen;
        var exitMethod = document.exitFullscreen || document.mozCancelFullScreen ||
            document.webkitExitFullscreen || document.webkitExitFullscreen; 
        if(!isFullScreen){
            if(typeof rfs != "undefined" && rfs) {
                rfs.call(el);
            } else if(typeof window.ActiveXObject != "undefined") {
            //for IE，这里其实就是模拟了按下键盘的F11，使浏览器全屏
                var wscript = new ActiveXObject("WScript.Shell");
                if(wscript != null) {
                    wscript.SendKeys("{F11}");
                }
            }
        }
        if(isFullScreen){
            if (exitMethod) {
                exitMethod.call(document);
            }
            else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript !== null) {
                    wscript.SendKeys("{F11}");
                }
            }
        }
        isFullScreen = !isFullScreen;
    }


    /**
    * 
    * 左右切换饼状图
    * 
    */
   $("#turnLeft").click(function(){
        showNum--;
        let s = 0,x;
        if(showNum<0){
            showNum = pie_data_in.length-1
        }
        for (let j = 0; j < 3; j++) {
            s = s + pie_data_in[showNum][j].value
        }
        x = pie_data_in[showNum][0].value/s
        if(x < 0.2){
            $("#level").css({"color":"lime","fontWeight":"normal"})
            $("#level").html("水质状况：良好")
        }else if(x <0.3){
            $("#level").css({"color":"orange","fontWeight":"normal"})
            $("#level").html("水质状况：轻度污染")
        }else{
            $("#level").css({"color":"red","fontWeight":"900"})
            $("#level").html("水质状况：重度污染")
        }
        draw_water_pie(title[showNum],pie_data_in[showNum],pie_data_out[showNum]);
   })
   $("#turnRight").click(function(){
       showNum++;
       let s = 0,x;
       if(showNum>pie_data_in.length-1){
           showNum = 0;
       }
       for (let j = 0; j < 3; j++) {
        s = s + pie_data_in[showNum][j].value
        }
        x = pie_data_in[showNum][0].value/s
        if(x < 0.2){
            $("#level").css({"color":"lime","fontWeight":"normal"})
            $("#level").html("水质状况：良好")
        }else if(x <0.3){
            $("#level").css({"color":"orange","fontWeight":"normal"})
            $("#level").html("水质状况：轻度污染")
        }else{
            $("#level").css({"color":"red","fontWeight":"900"})
            $("#level").html("水质状况：重度污染")
        }
        draw_water_pie(title[showNum],pie_data_in[showNum],pie_data_out[showNum]);
   })
})